<template>
  <div class="directory-panel">
    <template v-if="sectionLevel == 1">
      <section-item
        :data="item"
        v-for="(item, index) in sectionList"
        :key="index"
        :detailInfo="detailInfo"
      ></section-item>
    </template>
    <template v-else-if="sectionLevel == 2">
      <!-- 二级 -->
      <el-collapse
        accordion
        v-loading="loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        element-loading-spinner="el-icon-loading"
      >
        <el-collapse-item
          :name="item.id"
          v-for="(item, index) in sectionList"
          :key="index"
          @click.native="handleChange(2, index)"
        >
          <div
            slot="title"
            class="sec-title"
            :class="{
              active: getCurrentPlayPosition[0] === item.id
            }"
          >
            {{ item.title }}
          </div>
          <section-item
            :data="sonItem"
            v-for="(sonItem, sonIndex) in item.child"
            :key="sonIndex"
            :detailInfo="detailInfo"
          ></section-item>
        </el-collapse-item>
      </el-collapse>
    </template>
    <!-- 三级 -->
    <template v-else-if="sectionLevel == 3">
      <el-collapse
        accordion
        v-loading="loading"
        element-loading-background="rgba(0, 0, 0, 0.9)"
        element-loading-spinner="el-icon-loading"
      >
        <el-collapse-item
          :name="item.id"
          class="nano-item"
          v-for="(item, index) in sectionList"
          :key="index"
          @click.native="handleChange(2, index)"
        >
          <div
            slot="title"
            class="nano-title"
            :class="{
              active: getCurrentPlayPosition[0] === item.id
            }"
          >
            {{ item.title }}
          </div>
          <el-collapse accordion>
            <el-collapse-item
              :name="sonItem.id"
              v-for="(sonItem, sonIndex) in item.child"
              :key="sonIndex"
              @click.native="handleChange(3, index, sonIndex)"
            >
              <div
                slot="title"
                class="sec-title"
                :class="{
                  active: getCurrentPlayPosition[1] === sonItem.id
                }"
              >
                {{ sonItem.title }}
              </div>
              <section-item
                :data="subItem"
                v-for="(subItem, subIndex) in sonItem.child"
                :key="subIndex"
                :detailInfo="detailInfo"
              ></section-item>
            </el-collapse-item>
          </el-collapse>
        </el-collapse-item>
      </el-collapse>
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SectionItem from './sectionItem'
export default {
  props: ['courseId', 'detailInfo'],
  components: {
    SectionItem
  },
  data() {
    return {
      toryPid: 0,
      sectionList: [],
      directoryOne: null,
      directoryTwo: null,
      directoryTheme: null,
      sectionLevel: 0,
      loading: false,
      liveRoomType: { 1: 'big-class', 2: 'small-class', 3: 'one-to-one' },
      curr: [49, 50, 91]
    }
  },
  computed: {
    ...mapGetters({
      getCurrentPlayPosition: 'course/getCurrentPlayPosition'
    })
  },
  created() {
    this.handieDirectory()
  },
  methods: {
    // 章节目录
    handieDirectory() {
      this.loading = true
      let class_id = this.detailInfo.course_type === 4 ? this.detailInfo.id : 0
      this.$api.getCourseSection(
        this.courseId,
        0,
        {
          page: 1,
          count: 500,
          class_id: class_id
        },
        res => {
          const { data } = res
          this.sectionList = data.section_info.data
          this.sectionLevel = data.section_level
          this.loading = false
        }
      )
    },
    handleChange(type, index, childIndex) {
      let class_id = this.detailInfo.course_type === 4 ? this.detailInfo.id : 0
      if (this.$util.isEmpty(this.sectionList[index].child) && type === 2) {
        this.loading = true
        this.$api.getCourseSection(
          this.courseId,
          this.sectionList[index].id,
          {
            page: 1,
            count: 500,
            class_id: class_id
          },
          res => {
            const { data } = res
            this.$set(this.sectionList[index], 'child', data.section_info.data)
            this.loading = false
          }
        )
      } else if (type === 3) {
        if (this.$util.isEmpty(this.sectionList[index].child[childIndex].child)) {
          this.loading = true
          this.$api.getCourseSection(
            this.courseId,
            this.sectionList[index].child[childIndex].id,
            {
              page: 1,
              count: 999,
              class_id: class_id
            },
            res => {
              const { data } = res
              this.$set(this.sectionList[index].child[childIndex], 'child', data.section_info.data)
              this.loading = false
            }
          )
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 目录
.directory-panel {
  ::v-deep .el-collapse {
    border-top: 0;
    border-bottom: 0;
    .el-collapse-item__header,
    .el-collapse-item__wrap {
      background-color: transparent;
      border-bottom: 0;
    }
    .el-collapse-item__content {
      padding-bottom: 0;
    }
    .el-collapse-item__arrow {
      display: none;
    }
    .el-collapse-item__header {
      &:hover {
        background: rgba(48, 49, 51, 1);
      }
    }
  }

  .nano-title {
    padding-left: 15px;
    height: 50px;
    line-height: 50px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(220, 223, 230, 1);
    @include ellipsis();
    &.active {
      @include edu-color-auxiliary;
    }
  }
  .sec-title {
    padding-left: 30px;
    height: 50px;
    line-height: 50px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(220, 223, 230, 1);
    @include ellipsis();
    &.active {
      @include edu-color-auxiliary;
    }
  }
}
</style>
